<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <link href="../../static/css/bootstrap.min.css"  th:href="@{/static/css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="//hnres.etalk365.com/public/css/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <style type="text/css">
        html,body{
            height: 100%;
            background: #eee;
        }
        .nav{
            height: 42px;
            line-height: 40px;
            background: #fff;
            padding: 0 10px;
            position: relative;
        }
        .select{
            cursor: pointer;
        }
        .select_item{
            margin-right: 5px;
            display: inline-block;
        }
        .select_icon{
            width: 22px;
            vertical-align: middle;
        }
        .select_box{
            position: absolute;
            top:42px;
            left: 0;
            width: 15%;
            background: #fff;
            display: none;
            z-index:200;
        }
        .select_box li{
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
        .select_box li:hover{
            background: #eee;
            cursor: pointer;
        }
        .main{
            position: relative;
            margin-left: 0px;
        }
        .main .main-box{
            margin-top: 10px;
            padding-left: 0;
        }
        .main .main-item{
            background: #fff;
        }
        .main .title{
            height: 50px;
            line-height: 50px;
            color: #fff;
            padding: 0 5px;
        }
        .main .title .pull-left img{
            width: 20px;
            vertical-align: middle;
            margin-right: 5px;
        }
        .main .title .pull-right img{
            width: 20px;
            vertical-align: middle;
            cursor: pointer;
        }
        .main .title_bg1{
            background: #FF6600;
        }
        .main .title_bg2{
            background: #46BA7D;
        }
        .main .title_bg3{
            background: #FFCC00;
        }
        .main .title_bg4{
            background: #19a2e3;
        }
        .main .content{
            height: 400px;
        }
        .date_box,.selectbox{
            margin-right: 5px;
        }

        .modal_nestable{
            width: 100%;
            height: 100%;
            background: #fff;
            position: relative;
        }
        .list_nestable li{
            width: 100%;
            height: 40px;
            background: #fff;
            line-height: 40px;
            margin-bottom: 10px;
            border:1px solid #eee;
        }
        .main .title{
            position: relative;
        }
        .selectBox{
            position: absolute;
            top:50px;
            right: 0;
            width: 160px;
            background: #fff;
            z-index: 100;
            color: #000;
            /*text-align: center;*/
            padding-left: 10px;
            display: none;
        }
        .selectBox li:hover{
            background: #eee;
            cursor: pointer;

        }

        .icon img{
            width: 30px;
            height: 30px;
            margin-left: 5px;
            border: 1px solid #DFDFDF;
        }
        .icon{
            text-decoration: none;
        }
    </style>
<body>
    <div class="container-fluid">
        <!--<div class="nav">
            <div th:if="${roleId==12 or roleId==9}" class="pull-left select"><span th:text="${loginName}" class="select_item">E0012</span><img src="../../static/img/select_icon.png" class="select_icon" /></div>
            <div class="pull-right"><button type="button"  onclick="sortConfig()" class="btn">设置工作台视图</button></div>
            <ul th:if="${roleId==12 or roleId==9}" id="selectUser"  class="list-unstyled select_box" style="display: block;border: solid 1px #e6e6e6;overflow-y: auto;max-height: calc(100vh - 50px);">
                <li class="users" th:id="${session.userid}" th:text="${session.loginname}"></li>
                <li class="users" th:each="ccOrSSCList,ccOrSSCListStat: ${ccOrSSCList}" th:text="${ccOrSSCList.loginName}" th:attr="value=${ccOrSSCList.id}"></li>
            </ul>
        </div>-->
        <div>
            <div class="row main" style="padding-bottom: 15px;">
                <div class="gridly">
                    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 main-box" th:each="item,stat: ${dataList}">
                        <div class="main-item">
                            <div class="title" th:classappend="'title_bg'+${stat.index%4+1}">
                                <div class="pull-left"><img src="../static/img/tixing.png" th:src="@{/static/img/tixing.png}"/><span th:text="${item.getMenuName()}">提醒列表</span></div>
                                <div class="pull-right"><span class="date_box">   </span>
                                    <i class="fa fa-arrows-alt" style="margin-left: 5px;font-size: 16px;cursor: pointer;" th:data-url="${item.menuUrl}" th:onclick="|showData(this);|"></i>
                                    <img src="../static/img/close.png" th:src="@{/static/img/close.png}" class="close_icon">
                                </div>
                            </div>
                            <div class="content">
                                <iframe src="https://da.etalk365.com/cc_working?crm_stores_id=1&crm_cc_id=434" th:src="@{${item.menuUrl}}" style="width: 100%;height: 100%;" frameborder="0"></iframe>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="https://hkres.etalk365.com/public/lib/jquery/jquery.min.js" type="text/javascript"></script>
    <script src="../../static/js/jquery.gridly.js" th:src="@{/static/js/jquery.gridly.js}"></script>
    <script src="https://hnres.etalk365.com/public/lib/layer/layer.js"></script>
    <script>
        function showData(obj) {
            let url=$(obj).data("url");
            let isQuestionMark=url.lastIndexOf("?")==-1;
            if (isQuestionMark) {
                url += "?crm_user_id=[[${session.userid}]]";
            }else {
                url += "&crm_user_id=[[${session.userid}]]";
            }
            layer.open({
                type: 2,
                title: false,
                shadeClose: true,
                shade: 0.5,
                area: ['99%', '99%'],
                content: url //iframe的url
            });
        }
        // 点击关闭按钮
        $(".close_icon").click(function(){
            $(this).parents('.main-box').remove()
        });
    </script>
</body>
</html>
